Внешний вид сайта: темы и шаблоны

Лекция 8 из курса «Системы управления веб-контентом». Тема посвящена темам и шаблонам CMS — ключевому инструменту настройки внешнего вида сайта. После лекции студенты должны уметь устанавливать, настраивать и кастомизировать темы, а также создавать дочерние темы. Связь с предыдущими лекциями: в лекции 7 мы изучали плагины, расширяющие функционал. Теперь переходим к визуальной составляющей.

Начинаем с плана лекции. Четыре основных блока: понятие темы, работа с темами, кастомизация, дочерние темы. Упор будет сделан на практические навыки — установку, настройку через Кастомайзер, создание дочерней темы.

Ключевой момент: тема определяет только ВИЗУАЛЬНОЕ оформление, а не контент. Можно сменить тему и все записи, страницы, изображения останутся на месте — изменится только их отображение. Аналогия со зданием хорошо помогает понять суть. Приведите пример: если на сайте 100 записей и вы смените тему, все 100 записей будут отображаться в новом дизайне.

Паттерн MVC — один из важнейших в веб-разработке. Студентам важно понимать, что тема реализует только View. WordPress не является строгой MVC-системой, но принцип разделения логики и представления соблюдается. Подчеркните: при смене темы данные не теряются. Это частый страх новичков.

Два обязательных файла: style.css и index.php. Без них тема не будет работать. Остальные файлы необязательны, но почти любая тема их содержит. functions.php — отдельный разговор: он не является шаблоном, это файл с функциональностью темы. Расскажите, что header.php, footer.php и sidebar.php подключаются через get_header(), get_footer(), get_sidebar().

Иерархия шаблонов — важнейший концепт WordPress. Студенты должны понимать принцип «цепочки fallback». WordPress ищет шаблоны слева направо и использует первый найденный. Полная диаграмма доступна на developer.wordpress.org/themes/basics/template-hierarchy/ — покажите студентам. Практический пример: если нужна индивидуальная страница для рубрики «Новости», создаём category-novosti.php.

Заголовок темы в style.css — это то, как WordPress «узнаёт» тему. Без Theme Name тема не отобразится в списке тем. Поле Template используется только в дочерних темах — об этом поговорим позже. Обратите внимание на Requires PHP — важное поле, определяющее минимальную версию PHP.

functions.php — ключевой файл. Подчеркните разницу с плагином. Код в functions.php привязан к конкретной теме. Сменили тему — код перестал работать. Поэтому для критичного функционала (SEO, безопасность, бэкапы) всегда используйте плагины. wp_enqueue_scripts — правильный способ подключения CSS/JS в WordPress (не через тег link в header.php).

Template Tags — это «строительные блоки» для шаблонов темы. Обратите внимание на разницу между the_title() и get_the_title(): первая выводит, вторая возвращает значение. get_header(), get_footer(), get_sidebar() — не Template Tags в строгом смысле, но важно упомянуть их здесь. Полный список: developer.wordpress.org/themes/basics/template-tags/

Блоковые темы (FSE) — относительно новый подход в WordPress. Для специалистов по электронной экономике важно знать о двух подходах. Классические темы по-прежнему доминируют, но FSE — это будущее. Покажите демонстрацию: откройте редактор сайта в WordPress с блоковой темой (например, Twenty Twenty-Four).

Все темы в репозитории проходят проверку на безопасность командой WordPress. Это не гарантирует 100% безопасность, но существенно снижает риски. Покажите карточку темы на wordpress.org/themes — продемонстрируйте все элементы. Фильтры: «Featured», «Popular», «Latest», а также фильтры по особенностям (columns, e-commerce, blog).

Подчеркните: критерии выбора темы аналогичны критериям выбора плагина (лекция 7). Закодированные ссылки — распространённая проблема в бесплатных темах с внешних сайтов (не из репозитория). Проверьте тему через Theme Check (плагин) перед использованием. Адаптивность (mobile-first) сейчас — обязательное требование, не опция.

Для учебных целей и простых проектов достаточно бесплатных тем. Платные темы оправданы для коммерческих проектов с уникальными требованиями. «Блоб» — ситуация, когда тема включает в себя всё: слайдеры, конструкторы, Mega Menu. Это плохо для производительности. Проблема Freemium: многие бесплатные темы — это «обрезанные» версии платных, что часто разочаровывает пользователей.

Astra и GeneratePress — две самые рекомендуемые темы для бизнеса. Astra — 3+ млн установок, работает с Elementor, Beaver Builder, Divi. GeneratePress — 300 000+ установок, минималистичная, одна из самых быстрых. ThemeForest — крупнейший маркетплейс, но качество тем сильно варьируется. Для лабораторных работ будем использовать Twenty Twenty-Four (стандартная тема WordPress).

Покажите демонстрацию установки темы из репозитория прямо в админ-панели. Важно: установка и активация — это разные действия. Можно установить несколько тем и переключаться между ними. При активации новой темы предыдущая остаётся установленной — можно вернуться к ней. Способ 3 (FTP) используется редко, в основном для разработки.

Кастомайзер доступен в WordPress с версии 4.0 (2014). Ключевое преимущество: «что вижу, то и получу». Изменения не сохраняются, пока не нажмёте «Опубликовать». Если что-то пошло не так — просто закройте Кастомайзер без сохранения. Для блоковых тем (FSE) Кастомайзер заменён редактором сайта (Site Editor).

Набор разделов зависит от темы. Некоторые темы добавляют свои собственные разделы. Раздел «Дополнительный CSS» позволяет добавлять кастомные стили без редактирования файлов — удобно для мелких правок. Покажите демонстрацию Кастомайзера на реальном сайте. Упомяните: плагины (например, Elementor) добавляют свои разделы в Кастомайзер.

Правило «не более 3-4 цветов» — классическое правило дизайна. Основной, дополнительный, акцентный, фоновый. Google Fonts — самый популярный источник веб-шрифтов. Многие темы интегрируют их. Системные шрифты (system-ui) загружаются быстрее, т.к. не требуют внешнего запроса. Высота строки 1.5 — стандарт для читаемости. Меньше — тесно, больше — текст «размазывается».

SVG — лучший формат для логотипа: масштабируется без потери качества, маленький размер файла. Фавиконка отображается во вкладке браузера, в закладках и в результатах поиска. WordPress автоматически создаёт все размеры фавиконки из одного загруженного изображения (apple-touch-icon, favicon.ico и т.д.). Покажите на примере: загрузите простой логотип и фавиконку в Кастомайзере.

Это один из самых частых вопросов от новичков: «Почему у меня на главной странице показываются записи?». Ответ: по умолчанию WordPress настроен как блог. Для бизнес-сайта нужно переключить на статичную главную. Покажите демонстрацию на реальном сайте — создайте две пустые страницы и настройте. Две страницы нужны даже если «Блог» пока не нужен — WordPress требует назначить страницу для записей.

Elementor — самый популярный конструктор (5+ млн установок). Бесплатная версия покрывает 80% задач. Конструкторы страниц — мощный инструмент, но не стоит увлекаться. Для бизнес-сайта часто достаточно хорошей темы + Кастомайзера.

Это ключевой слайд лекции. Дочерние темы — обязательная практика в WordPress-разработке. Объясните, что произойдёт, если редактировать файлы родительской темы напрямую: при следующем обновлении все изменения будут потеряны. Аналогия с документом хорошо объясняет суть. Аналогия со слоями в Photoshop тоже работает.

Это важнейший механический слайд. Студенты должны чётко понимать порядок загрузки. Подчеркните исключение: functions.php НЕ переопределяется, а ДОПОЛНЯЕТСЯ. Оба файла загружаются. Это ключевое отличие от шаблонов, которые полностью переопределяются.

Поле Template — самое важное поле в дочерней теме. Без него WordPress не поймёт, какая тема является родительской. Обратите внимание: Template содержит имя ПАПКИ, а не название темы. screenshot.png — 1200x900 px, отображается как превью в панели тем.

Подчеркните разницу: template = родительская, stylesheet = текущая (дочерняя). Порядок подключения важен: сначала родительский стиль, затем дочерний — чтобы дочерние стили могли переопределять родительские. Четвёртый параметр wp_get_theme()->get('Version') добавляет версию темы для сброса кэша при обновлении.

Покажите демонстрацию: создайте дочернюю тему прямо на лекции через файловый менеджер хостинга. Плагин Child Theme Configurator — самый простой способ для новичков. Подчеркните: дочернюю тему нужно создавать ДО начала кастомизации, а не после.

Покажите на примере: откройте файловый менеджер, скопируйте footer.php из twentytwentyfour в дочернюю тему, внесите изменения. Важно: при обновлении родительской темы нужно проверить, не изменился ли шаблон, который вы переопределили.

Это будет важно при изучении модуля электронной коммерции (лекции 10-12). WooCommerce использует свой механизм шаблонов, но принцип тот же: копируй в дочернюю тему и редактируй.

ACF — стандарт де-факто для работы с кастомными полями в WordPress. Покажите, как ACF позволяет создавать поля через интерфейс и выводить их в шаблоне темы.

Связь с лекцией 7: плагины кэширования (WP Super Cache) мы уже изучали. PageSpeed Insights — основной инструмент Google для проверки скорости. Рекомендуйте проверять регулярно.

Nulled-темы — взломанные платные темы, распространяемые бесплатно. Часто содержат backdoor и malware. Никогда не используйте nulled-темы — это прямой путь к взлому сайта.

Свяжите с электронной экономикой: для интернет-магазина дизайн напрямую влияет на конверсию. Первое впечатление формируется за 0.05 секунды. Дизайн должен вызывать доверие. Google учитывает скорость загрузки (Core Web Vitals) в ранжировании.

Подведите итоги. Задайте студентам вопрос: «Какая тема вам больше нравится и почему?». Упомяните, что на следующей лекции будем изучать управление пользователями и правами доступа.

Эти вопросы можно использовать для опроса на следующем занятии или для самостоятельной подготовки к экзамену. Особенно важны вопросы 9-12 о дочерних темах — это ключевая тема лекции.